<template>
  <el-popover :width="300" placement="top-start">
    <template #reference>
          <span>
            <svg class="icon" height="32" p-id="7474" t="1679557211326" version="1.1"
                 viewBox="0 0 1024 1024" width="32" xmlns="http://www.w3.org/2000/svg"><path
                d="M813.738667 813.696a426.666667 426.666667 0 1 0-603.434667 0 426.666667 426.666667 0 0 0 603.434667 0z"
                fill="#FFD264" p-id="7475"></path><path
                d="M735.232 147.797333A426.666667 426.666667 0 0 1 152.448 741.418667 426.666667 426.666667 0 1 0 735.232 147.797333z"
                fill="#FFC656" p-id="7476"></path><path
                d="M143.36 557.013333A396.074667 396.074667 0 0 1 853.333333 315.733333 396.16 396.16 0 1 0 195.968 754.432a393.856 393.856 0 0 1-52.608-197.418667z"
                fill="#FFD781" p-id="7477"></path><path
                d="M337.066667 576.554667a14.08 14.08 0 0 0-22.869334 15.36 213.888 213.888 0 0 0 395.477334 3.925333 14.464 14.464 0 0 0 0.469333-9.386667 14.208 14.208 0 0 0-5.546667-7.594666 13.824 13.824 0 0 0-9.088-2.389334 14.165333 14.165333 0 0 0-8.533333 3.84c-62.421333 60.501333-194.986667 146.645333-349.909333-3.754666z"
                fill="#5E4939" p-id="7478"></path><path
                class="selected"
                d="M337.066667 576.554667a14.08 14.08 0 0 0-22.869334 15.36 213.888 213.888 0 0 0 395.477334 3.925333 14.464 14.464 0 0 0 0.469333-9.386667 14.208 14.208 0 0 0-5.546667-7.594666 13.824 13.824 0 0 0-9.088-2.389334 14.165333 14.165333 0 0 0-8.533333 3.84c-62.421333 60.501333-194.986667 146.645333-349.909333-3.754666z"
                data-spm-anchor-id="a313x.7781069.0.i1" fill="#62422A" p-id="7479"></path><path
                d="M386.261333 435.626667c0 29.312-14.037333 53.034667-31.402666 53.034666S323.413333 465.066667 323.413333 435.626667s14.08-52.992 31.445334-52.992 31.402667 23.722667 31.402666 52.992zM700.629333 435.626667c0 29.312-14.037333 53.034667-31.402666 53.034666s-31.445333-23.722667-31.445334-53.034666 14.037333-52.992 31.445334-52.992 31.402667 23.722667 31.402666 52.992z"
                fill="#352B2B" p-id="7480"></path>
            </svg>
          </span>
    </template>
    <div>
      <span v-for="(item,index) in emojis" :key="index" class="em" @click="select(item)">{{ item.text }}</span>
    </div>
  </el-popover>
</template>

<script setup>
let emojis = [
  '😀', '😄', '😅', '🤣', '😂', '😉', '😊', '😍', '😘', '😜',
  '😝', '😏', '😒', '🙄', '😔', '😴', '😷', '🤮', '🥵', '😎',
  '😮', '😰', '😭', '😱', '😩', '😡', '💀', '👽', '🤓', '🥳',
  '😺', '😹', '😻', '🤚', '💩', '👍', '👎', '👏', '🙏', '💪'
]
emojis = emojis.map(emoji => ({text: emoji}))

function select(item){

}

</script>

<style scoped>
.em {
  font-size: 25px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}
</style>